<po-modal
  #recoveryModal
  p-hide-close
  p-size="auto"
  [ngSwitch]="modalType"
  [p-components-size]="componentsSize"
  [p-primary-action]="primaryAction"
  [p-secondary-action]="secondaryAction"
  [p-title]="modalTitle"
>
  <div class="po-modal-password-recovery-wrapper">
    <div *ngSwitchCase="'email'" class="po-modal-password-recovery-content po-row">
      <div class="po-modal-password-recovery-text po-md-12 po-mb-1">
        {{ emailModalPhrases.firstPhrase }}
      </div>
      <div class="po-mb-2 po-md-12">
        <form #emailForm="ngForm">
          <div *ngIf="modalPasswordRecoveryTypeAll">
            <po-radio-group
              name="type"
              [(ngModel)]="chosenTypeFormOption"
              [p-options]="typeFormOptions"
              [p-size]="componentsSize"
              (p-change)="getInputType($event)"
            >
            </po-radio-group>
          </div>

          <div class="po-mt-1">
            <po-email
              *ngIf="type === 'email' || type === 'all'"
              name="email"
              [(ngModel)]="email"
              p-required
              [p-label]="literals.insertEmail"
              [p-size]="componentsSize"
              (p-change-model)="formModelChangesCheck(emailForm)"
            >
            </po-email>

            <po-input
              *ngIf="type === 'sms'"
              name="sms"
              [(ngModel)]="phone"
              p-icon="ICON_TELEPHONE"
              p-required
              [p-label]="literals.insertPhone"
              [p-mask]="phoneMask"
              [p-maxlength]="maxLength"
              [p-minlength]="minLength"
              [p-size]="componentsSize"
              (p-change-model)="formModelChangesCheck(emailForm)"
            >
            </po-input>
          </div>

          <div class="po-field-container-bottom po-field-container-error-container">
            <po-modal-password-recovery-error-message
              *ngIf="invalidEmail && control.dirty"
              [p-text]="type === 'sms' ? literals.phoneErrorMessagePhrase : literals.emailErrorMessagePhrase"
            >
            </po-modal-password-recovery-error-message>
          </div>
        </form>
      </div>
      <div class="po-modal-password-recovery-text po-md-12">
        {{ emailModalPhrases.secondPhrase }}
        <span *ngIf="contactEmail">
          {{ literals.prepositionIn }}
          <a class="po-modal-password-recovery-link" href="mailto:{{ contactEmail }}" target="_self">
            {{ contactEmail }}
          </a>
        </span>
        {{ endpoint }}
      </div>
    </div>

    <div #smsCodeModal *ngSwitchCase="'smsCode'" class="po-modal-password-recovery-content po-row">
      <div class="po-modal-password-recovery-text po-md-12 po-mb-1">{{ literals.sentSmsCodePhrase }}</div>
      <div class="po-mb-2 po-md-12">
        <form #smsCodeForm="ngForm">
          <po-input
            name="sms"
            [(ngModel)]="smsCode"
            p-maxlength="11"
            p-minlength="11"
            p-required
            [p-label]="literals.insertCode"
            [p-mask]="codeMask"
            [p-size]="componentsSize"
            (p-change-model)="formModelChangesCheck(smsCodeForm)"
          >
          </po-input>
          <div class="po-field-container-bottom po-field-container-error-container">
            <po-modal-password-recovery-error-message
              *ngIf="invalidEmail"
              [p-text]="smsCodeErrorMessage || this.literals.smsCodeErrorMessagePhrase"
            >
            </po-modal-password-recovery-error-message>
            <po-modal-password-recovery-error-message *ngIf="showCustomCodeError" [p-text]="codeError">
            </po-modal-password-recovery-error-message>
          </div>
        </form>
      </div>
      <div class="po-modal-password-recovery-text po-md-12">
        {{ literals.sendAgainPhrase }}
        <span class="po-modal-password-recovery-link" (click)="resendSmsCode()">{{ literals.sendAgain }}</span>
      </div>
    </div>

    <div #confirmationModal *ngSwitchCase="'confirmation'" class="po-modal-password-recovery-content po-row">
      <img class="po-modal-password-recovery-user-image po-mb-2" src="./assets/images/email-sent.svg" />
      <div class="po-modal-password-recovery-text">
        {{ literals.emailSentConfirmationPhrase }}
      </div>
    </div>
  </div>
</po-modal>
